<template>
	<view>
		<view class="box-bg">
			<uni-nav-bar>
				<view class="input-view">
					<uni-icons class="input-uni-icon" type="search" size="18" color="#999" />
					<input confirm-type="search" v-model="search" class="nav-bar-input" type="text" placeholder="输入搜索关键词"
						@confirm="confirm" />
				</view>
				<block slot="right">
					<view class="city" @click="confirm">
						搜索
					</view>
					<view class="city" @click="toPublish">
						发布
					</view>
				</block>
			</uni-nav-bar>
		</view>
		<v-tabs v-model="current" :tabs="tabs" :fixed="false" field="tagName" @change="change"></v-tabs>
		<view class="container">
			<hm-row-video-card :options="list"></hm-row-video-card>
		</view>
	</view>
</template>

<script>
	import HmRowVideoCard from '@/components/hm-row-video-card/index.vue'
	export default {
		data() {
			return {
				current: 0,
				tabs:null,
				list:null,
				value:1,
				search:null
			}
		},
		components: { HmRowVideoCard },
		onLoad() {
			this.getTags()
			this.getList(this.value)
		},
		onShow(){
			this.getTags()
			this.getList(this.value)
		},
		methods: {
			getTags(){
				this.$http.get('/tags').then(res=>{
					if(res.data.code!=200) return
					this.tabs=res.data.data
				})
			},
			getList(value){
				this.$http.get('/list',{
					params:{
						tagValue:value
					}
				}).then(res=>{
					if(res.data.code!=200) return
					this.list=res.data.data
				})
			},
			change(index){
				this.getList(index+1)
				
			},
			// 发布
			toPublish(){
				uni.navigateTo({
					url:'/pages/publish/index'
				})
			},
			confirm(){
				console.log(this.search)
				this.$http.get('/search',{
					params:{
						tagValue:this.value,
						search:this.search
					}
				}).then(res=>{
					if(res.data.code!=200) return
					this.list=res.data.data
				})
			},
			
		}
		
	}
</script>

<style lang="scss">
	$nav-height: 30px;

	.box-bg {
		background-color: #F5F5F5;
		padding: 5px 0;
	}

	.city {
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		// width: 160rpx;
		margin-left: 4px;
	}

	.input-view {
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		// width: 500rpx;
		flex: 1;
		background-color: #f8f8f8;
		height: $nav-height;
		border-radius: 15px;
		padding: 0 15px;
		flex-wrap: nowrap;
		margin: 7px 0;
		line-height: $nav-height;
	}

	.input-uni-icon {
		line-height: $nav-height;
	}

	.nav-bar-input {
		height: $nav-height;
		line-height: $nav-height;
		/* #ifdef APP-PLUS-NVUE */
		width: 370rpx;
		/* #endif */
		padding: 0 5px;
		font-size: 12px;
		background-color: #f8f8f8;
	}
</style>


